<template>
	<!-- 页面容器 -->
	<view class="gz-page-wrapper" :style="props.styles">
		<!-- 导航栏 -->
		<view v-if="navConfig.use" class="header" :style="{ height: `${scrollConfig.top}px` }">
			<uni-nav-bar :title="navConfig.title" :color="props.nav.color || navConfig.color" :fontWeight="navConfig.fontWeight" statusBar :border="false" backgroundColor="transparent" :fixed="false" :left-icon="navConfig.leftIcon" @clickLeft="clickLeftHandle"></uni-nav-bar>
		</view>
		<slot name="top"></slot>
		<mescroll-uni @init="mescrollInit" :down="props.down" @down="downCallback" :up="props.up" @up="upCallback" :top="`${scrollConfig.top}px`" :fixed="scrollConfig.fixed" height="100%" >
			<slot></slot>
		</mescroll-uni>
		<!-- <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="props.down" :up="props.up" :top="`${scrollConfig.top}px`">
			<slot></slot>
		</mescroll-body> -->
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, defineExpose, computed } from 'vue'
	import { onPageScroll, onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	
	const { downCallback, mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom, onPullDownRefresh)

	// 自定义事件
	const emits = defineEmits('upCallback')
	const props = defineProps({
		styles: { type: Object, default: () => {} },	// 容器背景样式
		nav: { type: Object, default: () => {} },	// 导航栏相关配置
		up: { type: Object, default: () => {} },	// 上拉加载配置
		down: { type: Object, default: () => {} },	// 下拉刷新配置
		scroll: { type: Object, default: () => {} },	// 滚动区域相关配置
	})
	// 导航栏高度
	const appData = getApp().globalData
	const statusBarHeight = ref(appData.statusBarHeight)
	
	// 导航栏的配置
	const navConfig = computed(() => {
		return {
			use: true,
			title: '',
			color: '#000',
			leftIcon: 'false',
			fontWeight:400,
			// 用户传递的值覆盖默认值
			...props.nav
		}
	})
	
	// 滚动区域的配置
	const scrollConfig = computed(() => {
		return {
			top: statusBarHeight.value + 44,	// 由导航栏和状态栏 以及滚动区域 上面的区域 不参与滚动的高度决定 默认即导航栏高度 单位px
			fixed: true,	// 
			// 用户传递的值覆盖默认值
			...props.scroll,
		}
	})
	/**
	 * 导航栏左侧图标点击事件
	 */
	function clickLeftHandle(){
		uni.navigateBack()
	}
	/**
	 * 上拉加载回调
	 */
	function upCallback(mescroll){
		emits('upCallback',mescroll)
	}
	defineExpose({
		getMescroll
	})
</script>

<style scoped lang="less">
	.gz-page-wrapper{
		.header{
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 998;
			
		}
	}
</style>